<template>
    <div ref="reportChart" style="width:100%;height: 500px;">
    </div>
  </template>

<script>
import * as echarts from 'echarts'

export default {
  props:['lineData','lineMonth'],
  data() {
    return {
        chart:"",
        data:undefined,
        month:undefined,
        min:undefined,
        max:undefined,
        gap:undefined,
    }
  },
  mounted() {
    // for(let i=0 ; i<this.lineData.length;i++){
    //   this.lineData[i] = Number(this.lineData[i])
    // }
    this.data = this.lineData
    this.month = this.lineMonth
    console.log('month',this.month)
    // this.min = this.lineData.sort()[0]
    // this.max = this.lineData.sort()[this.lineData.length-1]
    // let l=0
    // let temp = this.max
    // let front = undefined
		// while(temp >= 1){
    //   temp = temp/10
    //   front = temp%10
		// 	l++;
		// }
    // for(let i=0 ;i<this.lineData.length ; i++){
    //   this.data[i] = (this.data[i]/((Math.pow(10,l))*front))
    // }
    // console.log('data',this.data)
    // this.min = this.lineData.sort()[0]
    // this.max = this.lineData.sort()[this.lineData.length-1]
    // this.gap = (this.max-this.min)/4
    this.initChart()

    // console.log('min',this.min,this.max,this.gap)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.reportChart)
      // this.chart.resize()
      let option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor:'#132042',
            axisPointer: { type: 'cross' },
            textStyle: {
                color: "white", //设置文字颜色
                align:'left',
            },
            formatter: function(params) {
                let result = ''
                let dotHtml = '<span style="display:inline-block;margin-right:8px;border-radius:10px;width:10px;height:10px;background-color:#0090ff"></span>'
                result += params[0].axisValue + "</br>" + dotHtml + params[0].data
                return result
            }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.month,
        //   show:false,
        axisLabel:{
            interval:0,
            showMaxLabel:true,
        },
        axisTick: {
            show: false
        }
        },
        yAxis: {
          // length:1,
          // onZero:false,
          type: "value",
          // min:function(value){
		      //   return value.min;
	        // },
          // max:function(value){
		      //   return value.max;
	        // },
          // min:this.min,
          // max:this.max,
        //   show:false
        },
        series: [
          {
            symbol:'none',
            type: 'line',
            smooth:true,
            itemStyle:{
              normal:{
                lineStyle:{
                  color:'#2d76fe',
                }
              }
            },
            areaStyle:{
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(45, 118, 254,0.3)'    //靠上方的透明颜色
              },
              {
                offset: 1,
                color: 'rgba(45, 118, 254,0.05)'    //靠下方的透明颜色
              }
            ])
          },
          data: this.data,
          }
        ]
      }
      this.chart.setOption(option, true)
    }
  }
}
</script>

<style>
</style>
